<style lang="scss">
  .close-container {
    .el-table {
      height: calc(100vh - 260px)!important;
      margin-bottom: 14px;
    }
    .paste-btn-div {
      margin-top: 5px;
      text-align: center;
    }
    .gdxx-div {
      outline: 1px dotted #cccccc;
      padding-top: 7px;
      margin-top: 7px;
    }
    // 不满意件弹框
    .unsatify-dialog {
      .el-dialog__header {
        background-color: #e5f1fb;
        text-align: center;
        padding: 10px 20px;
      }
      .el-form {
        height: calc(100vh - 320px);
        overflow-y: auto;
        padding-top: 24px;
        .el-upload {
          width: 100%;
          .el-upload-dragger {
            width: 100%;
            height: 160px;
          }
        }
      }
      .gdxx-file {
        a {
          text-decoration: none;
          color: #308ee5;
          padding-right: 36px;
        }
        .file-btn {
          color: #308ee5;
          text-decoration: underline;
          padding: 0 4px;
          cursor: pointer;
        }
        .file-btn:hover {
          color: blue;
        }
      }
      .btn-div {
        margin: 20px 0;
        padding-right: 120px;
        text-align: right;
      }
    }
  }
</style>

<template>
  <!-- 工单维护-已下发 -->
  <el-container class="close-container">
    <!-- 顶栏容器 -->
    <el-header>
      <!-- 查询框 -->
      <div class="search-box">
        <div class="conditions-box">
          <div class="conditions-item">年度:
            <el-select
              v-model="pageParam.condition.govYear"
              size="small"
              :clearable="true"
              placeholder="请选择年度"
              @change="doSearch"
              style="width: 160px;"
            >
              <el-option
                v-for="(item, index) in yearList"
                :key="index"
                :label="item"
                :value="item"
              ></el-option>
            </el-select>
          </div>
          <div class="conditions-item">
            工单编号:
            <el-input v-model="pageParam.condition.code"
                      size="small"
                      :clearable="true"
                      placeholder="请输入工单编号"
                      style="width: 160px;"></el-input>
          </div>
          <div class="conditions-item">
            工单内容:
            <el-input v-model="pageParam.condition.content"
                      size="small"
                      :clearable="true"
                      placeholder="请输入内容关键字"
                      style="width: 160px;"></el-input>
          </div>
          <div class="conditions-item">
            工单来源:
            <el-select v-model="pageParam.condition.sourceId"
                       size="small"
                       :clearable="true"
                       placeholder="请选择工单来源"
                       @change="doSearch"
                       style="width: 160px;">
              <el-option v-for="item in sourceList"
                         :key="item.lyid"
                         :label="item.lymc"
                         :value="item.lyid"></el-option>
            </el-select>
          </div>
          <div class="conditions-item">
            执行处室:
            <el-select v-model="pageParam.condition.deptId"
                       size="small"
                       :clearable="true"
                       placeholder="请选择执行处室"
                       @change="doSearch"
                       style="width: 160px;">
              <el-option v-for="item in deptList"
                         :key="item.bmid"
                         :label="item.bmjc"
                         :value="item.bmid"></el-option>
            </el-select>
          </div>
        </div>
        <div class="search-btn">
          <el-button size="small"
                     icon="el-icon-search"
                     plain
                     @click="doSearch"
                     :loading="loadingTable">查询</el-button>
          <!-- <el-button
            type="danger"
            size="small"
            icon="el-icon-scissors"
            plain
            @click="unsatisfyFn"
          >不满意件</el-button> -->
        </div>
      </div>
    </el-header>
    <!-- 主要区域容器 -->
    <el-main>
      <el-table @row-dblclick="handledbClick"
                :data="tableItem.list"
                stripe
                border
                :height="tableHeight"
                v-loading="loadingTable">
        <el-table-column prop="code"
                         label="工单编号"
                         align="left"
                         show-overflow-tooltip></el-table-column>
        <el-table-column prop="sourceName"
                         label="来源系统"
                         align="center"
                         width="230"></el-table-column>
        <el-table-column prop="cateName"
                         label="工单类别"
                         align="center"
                         width="230"></el-table-column>
        <el-table-column prop="deptName"
                         label="执行处室"
                         align="center"
                         width="260"></el-table-column>
        <el-table-column prop="repeated" label="重复件" align="center" width="140">
          <template slot-scope="scope">
            <i v-if="scope.row.repeated=== 1" class="el-icon-refresh" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-refresh" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <el-table-column prop="important" label="紧急件" align="center" width="140">
          <template slot-scope="scope">
            <i v-if="scope.row.important=== 1" class="el-icon-star-off" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-star-off" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="unsatisfy" label="不满意" align="center" width="80">
          <template slot-scope="scope">
            <i v-if="scope.row.unsatisfy=== 1" class="el-icon-bell" style="color: red; font-size: 16px;"></i>
            <i v-else class="el-icon-bell" style="color: grey; font-size: 16px;"></i>
          </template>
        </el-table-column> -->
        <el-table-column prop="limitTime"
                         label="处理时限"
                         align="center"
                         width="240"
                         :formatter="formatLimitDate"></el-table-column>
          <el-table-column prop="dqzt" label="当前状态" align="center" width="140">
          <template slot-scope="scope">
            <span v-if="scope.row.dqzt=== 2" style="color: #F56C6C;">待分发</span>
            <span v-else-if="scope.row.dqzt=== 3" style="color: #E6A23C;">待办理</span>
            <span v-else-if="scope.row.dqzt=== 4" style="color: #409EFF;">已办理</span>
            <span v-else-if="scope.row.dqzt=== 5" style="color: #909399;">已退回</span>
            <span v-else-if="scope.row.dqzt=== 6" style="color: #67C23A;">已结束</span>
            <span v-else-if="scope.row.dqzt=== 7" style="color: #409EFF;">已办理审核</span>
            <span v-else-if="scope.row.dqzt=== 8" style="color: #909399;">退回待审核</span>
          </template>
        </el-table-column>
        <el-table-column prop="operations"
                         label="操作"
                         align="center"
                         width="100">
          <template slot-scope="scope">
            <el-button v-for="(item, index) in scope.row.operationsModelList"
                       :key="index"
                       :type="item.type"
                       plain
                       size="mini"
                       :icon="item.icon"
                       v-bind:class="'operations-'+item.handleMethod"
                       @click="operationClick(item.handleMethod, scope.row)">{{item.label}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="tableItem.pageNum"
                     :page-size="tableItem.pageSize"
                     :page-sizes="[20, 30, 50, 100]"
                     :total="tableItem.total"
                     layout="total, sizes, prev, pager, next, jumper"
                     style="float: right;"></el-pagination>
    </el-main>

    <!-- 待办理查看详情 -->
    <el-dialog title="工单查看"
               :visible.sync="dialogDetail"
               width="100%"
               :fullscreen="fullScreen"
               :before-close="dialogCloseFn"
               class="my_model_style">
      <synthesize-detail v-if="dialogDetail"
                         ref="synthesizeDetail"
                         v-bind:wllzid="wllzid"></synthesize-detail>
    </el-dialog>
  </el-container>
</template>

<script>
  import synthesizeDetail from '../synthesize/synthesize-detail'
  export default {
    name: 'inquire-important',
    data () {
      return {
        // 工单查看
        dialogDetail: false,
        wllzid: '',
        // 年度列表
        yearList: [],
        // 来源列表
        sourceList: [],
        // 处室列表
        deptList: [],
        // 查询参数
        pageParam: {
          pageNum: 1,
          pageSize: 20,
          condition: {
            govYear: '',
            deptId: '',
            sourceId: '',
            code: '',
            content: ''
          }
        },
        loadingTable: false,
        loadingForm: false,
        showFileDiv: false,
        // 表格高度
        tableHeight: -1,
        // 表格列表
        tableItem: {},
        // 已办理办理查看
        dialogCloseDetail: false,
        dialogUnsatisfyDetail: false,
        fullScreen: true,
      }
    },
    methods: {
      // 页面处室话方法
      initFn () {
        this.getYearList()
        this.getSourceList()
        this.getDeptList()
        this.doSearch()
      },
    // 获取年度列表
    getYearList() {
      this.$axios.post(this.$api.common.yearList).then(rs => {
        if (rs) {
          this.yearList = rs
          // this.pageParam.condition.govYear = rs[0]
        }
      })
    },
      // 获取来源列表
      getSourceList () {
        this.$axios.post(this.$api.source.selector).then(rs => {
          if (rs) {
            this.sourceList = rs
          }
        })
      },
      // 获取责任处室
      getDeptList () {
        this.$axios.post(this.$api.dept.selector).then(rs => {
          if (rs) {
            this.deptList = rs
          }
        })
      },
      // 查询方法
      doSearch () {
        this.loadingTable = true
        this.getClosePage()
      },
      // 获取超期件分页列表
      getClosePage () {
        this.$axios.post(this.$api.inquire.importantDept, this.pageParam).then(rs => {
          if (rs) {
            this.tableItem = rs
            this.loadingTable = false
          }
        })
      },
      // 分页
      handleSizeChange: function (size) {
        this.loadingTable = true
        this.pageParam.pageSize = size
        this.getClosePage()
      },
      // 分页
      handleCurrentChange: function (currentPage) {
        this.loadingTable = true
        this.pageParam.pageNum = currentPage
        this.getClosePage()
      },
      // 日期格式化
      formatLimitDate: function (row, column) {
        const _this = this
        var date = row.limitTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日')
      },
      formatCloseDate: function (row, column) {
        const _this = this
        var date = row.overTime
        if (date === undefined) {
          return ''
        }
        return _this.$moment(date).format('YYYY年MM月DD日 HH时mm分')
      },
      // 操作点击事件
      operationClick (method, row) {
        switch (method) {
          case 'detail':
            this.detailFn(row)
            break
        }
      },
      handledbClick (row, event, column) {
        this.detailFn(row)
      },
              // 查看
    detailFn: function (item) {
      this.wllzid = item.wllzid
      this.dialogDetail = true
    },
    dialogCloseFn: function () {
      this.wllzid = ''
      this.dialogDetail = false
    },
      // 查看
      // detailFn: function (item) {
      //   this.wllzid = item.wllzid
      //   this.dialogCloseDetail = true
      // },
      // dialogCloseCloseFn: function () {
      //   this.wllzid = ''
      //   this.dialogCloseDetail = false
      // },
      // 导入不满意件
      unsatisfyFn: function () {
        this.dialogUnsatisfyDetail = true
      },
      dialogCloseUnsatisfyFn: function () {
        this.fileDataList = []
        this.filePojo.importYm = ''
        this.formItemData = {}
        this.showFileDiv = false
        this.dialogUnsatisfyDetail = false
        // 再刷新table
        this.loadingTable = true
        this.getClosePage()
      },
      handleSuccess (res, file, fileList) {
        // console.log(res);
        if (res.code === 0) {
          this.fileDataList = []
          let result = res.data
          let fileInfo = {}
          fileInfo.name = result.fileName
          fileInfo.url = result.filePath
          fileInfo.type = result.fileType
          fileInfo.filePreview = result.filePreview
          this.fileDataList.push(fileInfo)
          // console.log(this.fileDataList);
        } else {
          this.$message.error('哎呀!文件上传失败请重试...')
          // fileList.splice(fileList.indexOf(file), 1)
        }
      },
      handleError (err, file, fileList) { },
      handleExceed () {
        this.$message.error('一次只能一个文件，别再点了...')
      },
      // 导入文件
      importFile () {
        const _this = this
        // .log(_this.fileDataList);
        if (!_this.filePojo.importYm) {
          this.$message({
            message: '请先选择日期...',
            showClose: true,
            type: 'warning'
          })
          return
        }
        if (_this.fileDataList.length === 0) {
          this.$message({
            message: '请先上传文件...',
            showClose: true,
            type: 'warning'
          })
          return
        }
        // 文件数据对象
        let fileInfo = _this.fileDataList[0]
        _this.filePojo.fileName = fileInfo.name
        _this.filePojo.filePath = fileInfo.url
        _this.filePojo.fileType = fileInfo.type
        // 请求，上传文件
        _this.loadingForm = true
        this.$axios
          .post(_this.$api.service.importUnsatisfy, _this.filePojo)
          .then(rs => {
            if (rs) {
              console.log(rs)
              _this.loadingForm = false
              _this.showFileDiv = true
              _this.formItemData = Object.assign(_this.formItemData, rs)
            } else {
              _this.loadingForm = false
            }
          })
      },
      // 文件预览
      filePreview (file) {
        // window.open(file.filePreview + encodeURIComponent(file.url));
        this.$previewFile(file.url)
      },
      // 生成后文件预览
      unFilePreview () {
        // window.open(this.formItemData.filePreview + encodeURIComponent(this.formItemData.filePath));
        this.$previewFile(this.formItemData.filePath)
      },
      // 文件下载
      unFileDownload () {
        // window.open(this.formItemData.filePath)
        this.$downloadFile(
          this.formItemData.filePath,
          this.formItemData.fileName
        )
      },
      // 不满意件标记
      unsatisfyChangeFn: function (item) {
        // console.log(item);
        const _this = this
        // 工单信息
        _this.loadingTable = true
        _this.gdxxEntityPojo.wllzid = item.wllzid
        _this.gdxxEntityPojo.unsatisfySwitch = item.unsatisfySwitch
        _this.$axios
          .post(_this.$api.service.unsatisfy, _this.gdxxEntityPojo)
          .then(function (rs) {
            if (rs) {
              _this.$message({
                message: '操作成功!',
                showClose: true,
                type: 'success'
              })
              _this.getClosePage()
            } else {
              _this.getClosePage()
            }
          })
      }
    },
    components: {
      // closeDetail
      synthesizeDetail
    },
    created: function () { }
  }
</script>
